import Link from "next/link";
import { Button } from "@/components/ui/button";
import { FileUpload } from "@/components/knowledge-base/file-upload";
import { formatDate, formatFileSize } from "@/lib/utils";

export default function KnowledgeBaseDetailPage({
  params,
}: {
  params: { id: string };
}) {
  // 模拟知识库详情
  const mockKnowledgeBase = {
    id: params.id,
    name: "研究资料",
    description: "包含研究论文和相关资料的知识库",
    createdAt: new Date("2023-12-15"),
  };

  // 模拟文档数据
  const mockDocuments = [
    {
      id: "1",
      name: "机器学习基础.pdf",
      fileType: "pdf",
      fileSize: 2500000,
      createdAt: new Date("2023-12-20"),
    },
    {
      id: "2",
      name: "深度学习研究.docx",
      fileType: "docx",
      fileSize: 1800000,
      createdAt: new Date("2024-01-05"),
    },
    {
      id: "3",
      name: "数据分析报告.txt",
      fileType: "txt",
      fileSize: 500000,
      createdAt: new Date("2024-02-10"),
    },
  ];

  // 处理文件上传
  const handleFileUpload = (file: File) => {
    console.log("文件上传:", file.name);
    // 实际项目中会调用API上传文件
  };

  // 获取文件图标
  const getFileIcon = (fileType: string) => {
    switch (fileType.toLowerCase()) {
      case "pdf":
        return (
          <svg
            className="h-8 w-8 text-red-500"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
            />
          </svg>
        );
      case "docx":
        return (
          <svg
            className="h-8 w-8 text-blue-500"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
            />
          </svg>
        );
      default:
        return (
          <svg
            className="h-8 w-8 text-gray-500"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
            />
          </svg>
        );
    }
  };

  return (
    <div>
      <div className="mb-8 flex items-center justify-between">
        <div>
          <div className="flex items-center gap-2">
            <Link
              href="/knowledge-bases"
              className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
            >
              &larr; 返回知识库列表
            </Link>
          </div>
          <h1 className="mt-2 text-2xl font-bold text-gray-900 dark:text-white">
            {mockKnowledgeBase.name}
          </h1>
          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
            {mockKnowledgeBase.description}
          </p>
          <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
            创建于: {formatDate(mockKnowledgeBase.createdAt)}
          </p>
        </div>
        <div className="flex gap-2">
          <Button
            className="bg-blue-600 hover:bg-blue-700"
          >
            新建对话
          </Button>
          <Button
            variant="outline"
          >
            编辑知识库
          </Button>
        </div>
      </div>

      <div className="grid gap-6 lg:grid-cols-[2fr_1fr]">
        <div>
          <div className="mb-6">
            <h2 className="mb-4 text-xl font-semibold text-gray-900 dark:text-white">
              文档列表
            </h2>
            {mockDocuments.length > 0 ? (
              <div className="rounded-lg border border-gray-200 dark:border-gray-700">
                <div className="overflow-hidden rounded-lg">
                  <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead className="bg-gray-50 dark:bg-gray-800">
                      <tr>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
                        >
                          文件名
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
                        >
                          大小
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
                        >
                          上传日期
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
                        >
                          操作
                        </th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900">
                      {mockDocuments.map((doc) => (
                        <tr
                          key={doc.id}
                          className="hover:bg-gray-50 dark:hover:bg-gray-800"
                        >
                          <td className="whitespace-nowrap px-6 py-4">
                            <div className="flex items-center">
                              {getFileIcon(doc.fileType)}
                              <div className="ml-4">
                                <div className="text-sm font-medium text-gray-900 dark:text-white">
                                  {doc.name}
                                </div>
                              </div>
                            </div>
                          </td>
                          <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                            {formatFileSize(doc.fileSize)}
                          </td>
                          <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                            {formatDate(doc.createdAt)}
                          </td>
                          <td className="whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
                            <button className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
                              删除
                            </button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            ) : (
              <div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-gray-300 py-12 dark:border-gray-700">
                <svg
                  className="mb-4 h-12 w-12 text-gray-400 dark:text-gray-600"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                  />
                </svg>
                <p className="mb-2 text-center text-xl font-medium text-gray-900 dark:text-white">
                  没有文档
                </p>
                <p className="mb-6 text-center text-sm text-gray-500 dark:text-gray-400">
                  上传文档以开始构建您的知识库
                </p>
              </div>
            )}
          </div>
        </div>

        <div>
          <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
            <h3 className="mb-4 text-lg font-semibold text-gray-900 dark:text-white">
              上传新文档
            </h3>
            <FileUpload onUpload={handleFileUpload} />
          </div>
        </div>
      </div>
    </div>
  );
} 